<template>
	<view>
		<u-tabs inactive-color="#000" :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg"
			:duration="0.2" @change="onChangeTab" />
		<div class="tips">
			<u-icon name="volume-up" style="margin-right: 10rpx;"></u-icon>
			各大合作平台，下单越多，奖励越多
		</div>
		<div class="box" v-if="list.length">
			<div class="box-item" @click="navTO(item)" v-for="(item,index) in list" :key="index">
				<div class="left">
					<image :src="getImage(item)" mode=""></image>
					<div class="modal">{{getPT(item)}}</div>
				</div>
				<div class="right">
					<div class="title">
						<text class="ic">下单奖励</text>
						<text>{{getName(item)}}</text>
					</div>
					<div class="price-box">
						<div class="lf">
							订单金额 ￥{{getPrice(item)}}
						</div>
						<div class="rh">
							奖励金额 ￥{{getJl(item)}}
						</div>
					</div>
					<div class="btom">
						<div class="lf">{{formatTime(item.order_time)}}</div>
						<div class="fr">来自{{item.city}}的用户</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else style="padding-top: 100rpx;">
			<u-empty margin-top="50rpx" mode="list"></u-empty>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [],
				curTab: 'all',
				list: []
			};
		},
		filters: {

		},
		methods: {
			navTO(info){
				const types = {
					2:'jd',
					3:'pdd'
				}
				uni.navigateTo({
					url:`/pageC/goods/goods?id=${info.goods_id}&type=${types[info.type]}`,
					
				})
			},
			getImage(info) {
				switch (info.type) {
					case 2:
						return info.snapshot.imageInfo.imageList[0].url;
					case 3:
						return info.snapshot.goods_image_url
					default:
						break;
				}
			},
			getPT(info) {
				switch (info.type) {
					case 2:
						return '京东';
					case 3:
						return '拼多多';
					default:
						break;
				}
			},
			getName(info) {
				switch (info.type) {
					case 2:
						return info.snapshot.skuName;
					case 3:
						return info.snapshot.goods_name;
					default:
						break;
				}
			},
			getPrice(info) {
				switch (info.type) {
					case 2:
						return info.snapshot.priceInfo.price;
					case 3:
						return info.snapshot.min_normal_price/1000;
					default:
						break;
				}
			},
			getJl(info) {
				return info.set_commision_rate
				// switch (info.type) {
				// 	case 2:
				// 		return info.snapshot.commissionInfo.commission;
				// 	case 3:
				// 	return ((info.snapshot.min_normal_price/1000)*info.snapshot.predict_promotion_rate*0.01).toFixed(2);
				// 	default:
				// 		break;
				// }
			},
			formatTime(timestamp) {
				const date = new Date(timestamp * 1000)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			onChangeTab(e) {
				this.curTab = e
				this.getList()
			},
			async getList() {
				const res = await this.$api.my.rewardList({
					cate_id: this.tabs.find(i=>i.value==this.curTab).key
				})
				this.list = res.data.list || []
				console.log(this.list);
			},
			async getCart() {
				const res = await this.$api.my.rewardCart()
				// console.log(res);
				this.tabs = res.data.list.map((i,index) => ({
					name: i.cate_name,
					key:i.id,
					value: index
				}))
				this.onChangeTab(0)
			},

		},
		onLoad() {
			this.getCart()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.tips {
		width: 750rpx;
		height: 72rpx;
		background: #FF8C19;
		color: #fff;
		line-height: 72rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
	}

	.box {
		background-color: #fff;

		.box-item {
			padding: 24rpx;
			display: flex;

			.left {
				width: 200rpx;
				height: 200rpx;
				background: #EEEEEE;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 24rpx;
				position: relative;

				>image {
					width: 100%;
					height: 100%;
				}

				.modal {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 200rpx;
					height: 46rpx;
					background: #000000;
					border-radius: 0rpx 0rpx 12rpx 12rpx;
					opacity: 0.4;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}

			}

			.right {
				flex: 1;

				.title {
					width: 478rpx;
					margin-bottom: 20rpx;
					height: 68rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					.ic {
						float: left;
						width: 96rpx;
						height: 28rpx;
						margin-right: 4rpx;
						background: #FFC225;
						border-radius: 4rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-weight: 500;
						font-size: 20rpx;
					}
				}

				.price-box {
					display: flex;
					align-items: center;
					margin-bottom: 22rpx;
					
					>.lf {
						font-weight: 400;
						font-size: 24rpx;
						color: #444444;
						min-width: 180rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						background: #F5F4F2;
						border-radius: 200rpx 0rpx 0rpx 200rpx;
						
						padding: 0 8rpx;
						box-sizing: border-box;
					}

					>.rh {
						padding: 0 8rpx;
						box-sizing: border-box;
						font-weight: 400;
						font-size: 24rpx;
						color: #fff;
						min-width: 180rpx;
						line-height: 48rpx;
						text-align: center;
						height: 48rpx;
						background: linear-gradient(135deg, #FD3052 0%, #FD3041 100%);
						border-radius: 0rpx 200rpx 200rpx 0rpx;
					}
				}

				.btom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 400;
					font-size: 20rpx;
					color: #999390;
				}
			}
		}
	}
</style>